<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 挂载点元素 -->
    <div id="root"></div>

    <!-- 引入核心库 -->
    <!-- 开发版本 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- <script>
      //  创建一个 React元素（虚拟DOM | 虚拟Node）
      /**
       * React.createElement(type, props, children)
       *    type        标签名 or 组件
       *    props       属性
       *    children    子元素
       */
      const element = React.createElement("button", null, "点我");

      //  1. 先创建根节点，使用 ReactDOM.createRoot()
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      //  2. 再使用创建出来的根节点root的render方法来渲染元素
      root.render(element);
    </script> -->

    <script type="text/babel">
      // 将下面的结构渲染到挂载点
      // <div>
      //   <h1>Hello React</h1>
      //   <div class="box">
      //     <p>我的天，洗脚真爽。</p>
      //     <button class="btn">那确实</button>
      //   </div>
      // </div>

      // 一、使用 React.createElement 来创建元素
      // const element = React.createElement("div", null, [
      //   React.createElement("h1", { key: "001" }, "Hello React"),
      //   React.createElement("div", { key: "002", className: "box" }, [
      //     React.createElement("p", { key: "001" }, "我的天，洗脚真爽。"),
      //     React.createElement(
      //       "button",
      //       { key: "002", className: "btn" },
      //       "那确实"
      //     ),
      //   ]),
      // ]);

      // 二、使用 JSX 语法 来创建元素
      //    PS: 浏览器是不支持 JSX 语法的，需要转换成 JS 语法才行
      //        使用 babel 来转换
      //        1. 引入 babel
      //        2. 带有 JSX 语法的 script 标签。将它的 type 属性设置为 text/babel
      const element = (
        <div>
          <h1>Hello React</h1>
          <div className="box">
            <p>我的天，洗脚真爽。</p>
            <button className="btn">那确实</button>
          </div>
        </div>
      );

      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(element);
    </script>
  </body>
</html>
